<template>
  <div>
    <p>任务记录</p>
    <p>训练任务记录</p>
    <!-- 信息表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="200"> </el-table-column>
      <el-table-column prop="taskName" label="任务名" width="180">
      </el-table-column>
      <el-table-column prop="taskState" label="状态" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <el-button plain>下载软件包</el-button>
        <el-button plain>下载过程日志</el-button>
        <el-button plain>下载测评报告</el-button>
        <el-button plain>详情</el-button>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="pagechange"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { baseUrls } from "@/main.js";
export default {
  data() {
    return {
      //训练任务记录
      tableData: [],
      //表格总数据
      total: 1,
      //当前页
      page: 1,
    };
  },
  methods: {
    //获得任务记录信息
    getTrainingRecord() {
      this.$http
        .get(`${baseUrls.base2}/task/page` + `?taskType=0&currentPage=${this.page}`).then((res) => {
          this.total = res.data.data.total;
          res.data.data.records.forEach((i) => {
            this.tableData.push(i);
            this.tableData.forEach((j) => {
              switch (j.taskState) {
                case 0:
                  j.taskState = "已创建";
                  break;
                case 1:
                  j.taskState = "进行中";
                  break;
                case 2:
                  j.taskState = "已完成";
                  break;
                case 3:
                  j.taskState = "已失败";
                  break;
                case 4:
                  j.taskState = "已取消";
                  break;
              }
            });
          });
        });
    },
    //页数改变
    pagechange(page) {
      this.page = page;
      this.tableData = [];
      this.getTrainingRecord();
    },
  },
  //生命周期函数
  created() {
    this.getTrainingRecord();
  },
};
</script>
<style scoped>
</style>
